<template>
  <div>
    <el-dialog :visible.sync="visible" :width="'70%'" :title="$t('process.configNode')" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="配置任务执行人" name="task-person">
          <task-person ref="taskPerson"></task-person>
        </el-tab-pane>
        <el-tab-pane label="配置任务表单" name="task-form">
          <task-form ref="taskForm"></task-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import TaskPerson from './process-task-person'
import TaskForm from './process-task-form'
export default {
  name: 'process-config',
  data () {
    return {
      loading: false,
      visible: false,
      processId: '',
      modelKey: '',
      activeName: 'task-person'
    }
  },
  components: {
    TaskPerson,
    TaskForm
  },
  methods: {
    handleClick (tab, event) {
      if (this.activeName === 'taskPerson') {
        this.init()
      } else {
        this.$refs.taskForm.id = this.processId
        this.$refs.taskForm.modelKey = this.modelKey
        this.$refs.taskForm.init()
      }
    },
    init () {
      this.$nextTick(() => {
        this.$refs.taskPerson.id = this.processId
        this.$refs.taskPerson.modelKey = this.modelKey
        this.$refs.taskPerson.init()
      })
    }
  }
}
</script>
